<template>
  <div class="Homepage">
    <div class="HeaderNav"></div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" id="swiper1">
          <img src="../../../commpent/images/plane.png" alt>
        </div>
        <div class="swiper-slide" id="swiper2">
          <img src="../../../commpent/images/plane.png" alt>
        </div>
        <div class="swiper-slide" id="swiper3">
          <img src="../../../commpent/images/plane.png" alt>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 -->
      <!-- <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>-->
      <!-- 如果需要滚动条 -->
      <div class="swiper-scrollbar"></div>
    </div>
    <mt-actionsheet :actions="data" v-model="sheetVisible"></mt-actionsheet>
    <!-- <div class="HomePagePortrait">
      <ul>
        <li>
          <div @click="actionSheet">
            <img src="../../common/images/HomeOne.png" alt>
          </div> -->
          <!-- <div class="mint-button mint-button--default mint-button--large" @click="actionSheet"></div> -->
          <!-- <span>扫一扫</span>
        </li>

        <li>
          <div>
            <img src="../../common/images/shenpiqi.png" alt>
          </div>
          <span>通知公告</span>
        </li>
        <li>
          <div>
            <img src="../../common/images/msg.png" alt>
          </div>
          <span>待我审批</span>
        </li>
        <li>
          <div>
            <img src="../../common/images/HomeFourTx.png" alt>
          </div>
          <span>驾驶员档案</span>
        </li>
        <div class="clearfix"></div>
      </ul>
    </div> -->
    <div class="HomePagePersonnelFiles">
      <ul>
        <li
          v-for="PersonnelFiles in PersonnelFilesData"
          :key="PersonnelFiles.id"
          @click="HomepageGo(PersonnelFiles.to)"
        >{{PersonnelFiles.name}}</li>
        <div class="clear"></div>
      </ul>
    </div>
    <home-footer ref="mychild"></home-footer>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Swiper from "swiper";
import HomeFooter from "../Footer";
var scan = null;
var styles = { frameColor: "#2e5dea", scanbarColor: "#2e5dea" }; //边框属性，中间线属性，背景色
var filter; //扫码格式 空为全类型
export default {
  name: "HelloWorld",
  data() {
    return {
      data: [
        {
          name: "扫一扫",
          method: this.getCamera // 调用methods中的函数
        }
        // {
        //   name: "从相册中选择",
        //   method: this.getLibrary // 调用methods中的函数
        // }
      ], // action sheet 默认不显示，为false。操作sheetVisible可以控制显示与隐藏
      sheetVisible: false,
      //常用应用
      PersonnelFilesData: [
        {
          id: "1",
          to: "/VehicleArchives",
          name: "车辆档案"
        },
        {
          id: "2",
          to: "/Driverfiles",
          name: "驾驶员档案"
        },
        {
          id: "3",
          to: "/Personnelirregularitiesregistration",
          name: "人员违规登记"
        },
        {
          id: "4",
          to: "/Equipment",
          name: "设备违规登记"
        },
        {
          id: "5",
          to: "/Nopowerfile",
          name: "无动力设备档案"
        },
        {
          id: "6",
          to: "/InformationAircraft",
          name: "外来物损伤"
        },
        {
          id: "7",
          to: "/two",
          name: "知识抽查"
        },
        {
          id: "8",
          to: "/StatisticalAnalysis",
          name: "统计分析"
        }
      ],
      dataCount: this.$store.state.userInfo1 //用data接收,
    };
  },
  components: {
    HomeFooter
  },
  created() {},
  computed: {},
  mounted() {
    new Swiper(".swiper-container", {
      loop: true,
      autoplay: 3000,
      // 如果需要分页器
      pagination: ".swiper-pagination",
      // 如果需要前进后退按钮
      nextButton: ".swiper-button-next",
      prevButton: ".swiper-button-prev",
      // 如果需要滚动条
      // scrollbar: ".swiper-scrollbar",
      speed: 300
    });
    this.$refs.mychild.FooterUlliData("0");
  },
  watch: {
    },
  methods: {
    //跳转
    HomepageGo: function(to) {
      this.$router.push({ path: to });
    },
    actionSheet: function() {
      // 打开action sheet
      this.sheetVisible = true;
    },
    getCamera: function() {
      console.log("打开照相机");
      this.$router.push({ name: "Scan" });
    },
    getLibrary: function() {
      console.log("打开相册");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.swiper-container {
  width: 98%;
  height: 2rem;
  margin: 0.1rem auto;
}
/* #swiper1 {
  background: rgb(255, 15, 15);
}
#swiper2 {
  background: rgb(107, 170, 12);
}
#swiper3 {
  background: rgb(16, 16, 141);
} */
.HomePagePortrait {
  margin-top: 0.5rem;
}
.HomePagePortrait ul {
  width: 80%;
  margin: 0 auto;
}
.HomePagePortrait ul li:nth-child(1) {
  margin-left: 0;
}
.HomePagePortrait ul li {
  width: 1rem;
  height: 1rem;
  float: left;
  margin-left: 0.66rem;
}
.HomePagePortrait ul li span {
  font-size: 0.18rem;
}
/* .HomePagePortrait ul li:nth-child(1) div {
  background: url("../../common/images/HomeOne.png") #eee;
  background-size: cover;
  width: 100%;
  height: 100%;
} */
/* .HomePagePortrait ul li:nth-child(2) div {
  background: url("../../common/images/shenpiqi.png");
  background-size: cover;
  width: 100%;
  height: 100%;
}
.HomePagePortrait ul li:nth-child(3) div {
  background: url("../../common/images/msg.png");
  background-size: cover;
  width: 100%;
  height: 100%;
} */
.HomePagePortrait ul li img {
  width: 60%;
}
.HomePagePortrait ul li div {
  background: url("../../common/images/HomeFour.png");
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* 常用 */
.HomePagePersonnelFiles ul {
  margin: 0 auto;
  width: 90%;
  margin-top: 0.3rem;
}
.HomePagePersonnelFiles ul li {
  width: 3.2rem;
  height: 0.7rem;
  background: #409EFF;
  float: left;
  color: #fff;
  line-height: 0.7rem;
  margin-top: 0.25rem;
  border-radius: 5px 5px 5px 5px;
  font-size: 0.18rem;
}
.HomePagePersonnelFiles ul li:nth-child(even) {
  margin-left: 0.3rem;
}
.swiper-button-prev,
.swiper-button-next {
  width: 0.7rem;
  height: 0.5rem;
  top: 65%;
}
.swiper-pagination-bullet {
  width: 0.1rem;
  height: 0.1rem;
}
.el-input--suffix .el-input__inner {
  /* padding: 0.5rem; */
}
</style>
